<template>
  <div id="commentDetails">
    <c-title :hide="false" text="评价详情"></c-title>
    <div class="comm-all"  :class="append && !(append instanceof Array) ? 'comm-padding':''">
      <div class="comm-user flex-a-c">
        <img :src="commentInfo.head_img_url" class="avatar" />
        <div class="user-wrap flex-a-c flex-j-sb">
          <div class="title">
            <h3>{{ commentInfo.nick_name }}</h3>
            <h4>{{ commentInfo.level_name }}</h4>
          </div>
          <div class="user-time">{{commentInfo.created_at}}</div>
        </div>
      </div>
      <div class="comment" v-if="commentInfo.content">{{ commentInfo.content }}</div>
      <div class="comment" v-else>此用户没有填写评价</div>
      <div class="pic"  v-if="images && images.length > 0">
        <viewer :images="images" class="flex pic-flex">
          <img v-for="(item, index) in images" :key="index" class="pj-img" :src="item" />
        </viewer>
      </div>
      <div class="goods-rate flex-a-c" @click="toGoods(has_one_order_goods.goods_id)">
        <div class="rate flex-a-c">
          <h4>评分：</h4>
          <van-rate v-model="commentInfo.level" readonly   :size="12" :color="'var(--themeBaseColor)' || '#E32323'"/>
        </div>
        <div class="option-right flex-a-c"  v-if="has_one_order_goods">
          <div v-if="has_one_order_goods.goods_option_title">规格: {{has_one_order_goods.goods_option_title}},</div>
          <div class="option total">X{{has_one_order_goods.total}}</div>
        </div>
      </div>
      <div class="goods-wrap flex"  @click="toGoods(has_one_order_goods.goods_id)" v-if="has_one_order_goods">
        <img :src="has_one_order_goods.thumb" class="images" />
        <div class="info-wrap flex-a-c flex-j-sb">
          <h4 class="ell">{{has_one_order_goods.title}}</h4>
          <h5>{{$i18n.t('money')}} {{has_one_order_goods.price}}</h5>
        </div>
      </div>
      <div  v-if="append && !(append instanceof Array)">
        <div class="append-flex">
          <div class="comment-append" v-if="append.diff_date.value > 0">{{ append.diff_date.value }}{{ append.diff_date.sku }}追评:</div>
          <div class="comment-append" v-else>追评:</div>
          <div class="comment-box" >&nbsp;{{ append.content }}</div>
        </div>
        <div class="pic"  v-if="append.images && append.images.length > 0">
          <viewer :images="append.images">
            <img v-for="(item, index) in append.images" :key="index" class="pj-img" :src="item" />
          </viewer>
        </div>
      </div>
    </div>

    <div class="comment-main" v-if="has_many_reply.length > 0">
      <h3>全部评论·<span>{{has_many_reply.length}}</span></h3>
      <div class="comment-list">
        <div class="comment-item flex">
          <div class="img">
            <img :src="commentInfo.head_img_url" />
          </div>
          <div class="comment-wrap ">
            <div class="wrap-left flex-a-c flex-j-sb">
              <div class="wrap-name flex">
                <h4>{{commentInfo.nick_name}} </h4>
              </div>
              <h5>{{commentInfo.created_at}}</h5>
            </div>
            <div class="comment-desc" v-if="commentInfo.content" @click="submitReplyForComment">{{commentInfo.content}}</div>
            <div class="comment-desc" v-else @click="submitReplyForComment">此用户没有填写评价</div>
          </div>
        </div>
        <template v-if="has_many_reply.length > 0">
          <div class="comment-item flex" v-for="(item,index) in has_many_reply" :key="index">
            <div class="img">
              <img :src="item.head_img_url" />
            </div>
            <div class="comment-wrap">
              <div class="wrap-left flex-a-c flex-j-sb">
                <div class="wrap-name flex">
                  <h4>{{item.nick_name}}</h4>
                  <span v-show="item.is_shop === 0"> 回复 </span>
                  <div class="wrap-merchant" v-show="item.is_shop === 1">商家回复</div>
                  <h4 class="name-padding" v-show="item.is_shop === 0">{{item.reply_name}}</h4>
                </div>
                <h5>{{item.created_at}}</h5>
              </div>
              <div class="comment-desc" v-if="item.content" @click="replyToSomeOne(item)">{{item.content}}</div>
              <div class="comment-desc" v-else @click="replyToSomeOne(item)">此用户没有填写评价</div>
              <div class="pic item-pic"  v-if="item.images && item.images.length > 0">
                <viewer :images="item.images" class="flex pic-flex">
                  <img v-for="(item, index) in item.images" :key="index" class="pj-img" :src="item" />
                </viewer>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
    <div class="comment-footer flex-a-c">
      <div class="share" @click="showShareOverlay">
        <p class="iconfont icon-material_share"></p>
        <p>分享</p>
      </div>
      <div class="comment-btn flex">
        <input v-model="reply_content" type="" :placeholder="reply_placeholder" />
        <div @click="submitReply">提交</div>
      </div>
    </div>
    <div style="height: 60px;"></div>
    

    <yz-wechat-share-img v-model="isShowShare"></yz-wechat-share-img>
  </div>
</template>
<script>
//CommentDetailsController
import CommentDetailsController from "./CommentDetailsController";
export default CommentDetailsController;
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#commentDetails {
  a {
    color: #000;
  }

  .all {
    background: #fff;
  }

  #callback {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff;
    padding: 0.625rem 0;

    input {
      flex: 5;
      border: #919191 solid 0.0625rem;
      border-radius: 0.3125rem;
      line-height: 1.875rem;
      padding-left: 0.3125rem;
      margin-left: 0.3125rem;
    }

    button {
      flex: 1;
      border: #dd191d solid 0.0625rem;
      border-radius: 0.3125rem;
      background: #e84e40;
      color: #fff;
      line-height: 1.875rem;
      margin: 0 0.625rem;
    }

    .share-btn {
      flex: 1;
      text-align: center;
      color: #6c6b6b;
      line-height: 1.875rem;
      margin: 0 0.625rem;
    }
  }

  .userimg {
    border-radius: 50%;
    overflow: hidden;
    width: 2.5rem;
    margin-right: 0.625rem;

    img {
      display: block;
      width: 100%;
    }
  }

  .zp {
    .append-class {
      white-space: nowrap;
      word-break: break-all;
      color: #e84e40;
    }
  }
  .spaet {
    color: #919191;
    flex: 3;
    text-align: right;
  }

  .pj {
    border-bottom: #e8e8e8 solid 0.0625rem;
    background: #fff;
    padding: 0.625rem 0;
    margin: 0 1rem;

    p {
      text-align: left;
      margin-top: 0.625rem;
      line-height: 1.5rem;
      font-size: 0.875rem;
    }

    img {
      width: 100%;
    }

    .name {
      font-size: 0.875rem;
      text-align: left;

      .level-name {
        color: #8c8c8c;
        margin-top: 0.3rem;
      }
    }

    .pjImgs {
      display: flex;
      flex-wrap: wrap;

      .pjImgWrapper {
        height: 2.8rem;
        padding: 0.15rem;

        img {
          width: 2.5rem;
          height: 2.5rem;
        }
      }
    }
  }



  .pjgoods {
    padding: 0.625rem 0;
    background: #fff;
  }

  .goods::after {
    content: "";
    display: block;
    clear: both;
  }

  .goods {
    width: 100%;
    box-sizing: border-box;
    background: #fafafa;

    .img {
      /* flex: 1; */
      width: 6rem;
      height: 6rem;
      padding: 0.875rem;
      display: inline-block;
      img {
        width: 100%;
      }
    }

    .warp {
      width: 70%;
      padding-top: 0.625rem;
      padding-right: 1rem;
      display: inline-block;

      .inner {
        width: 70%;
        float: left;
        box-sizing: border-box;
        text-align: left;

        .name {
          text-align: left;
          color: #333;
          margin-bottom: 0.625rem;
          font-size: 0.875rem;
        }
      }

      .price {
        width: 30%;
        align-items: center;
        text-align: right;
        color: #333;
        box-sizing: border-box;
        float: left;
        padding-right: 0.25rem;

        p {
          margin-top: 0;
        }
      }
    }

    .product_price {
      margin-bottom: 0.625rem;
      font-size: 0.875rem;
    }
    .option {
      color: #8c8c8c;
      font-size: 0.75rem;
      flex: 1;
    }

    .option2 {
      color: #e84e40;
      font-size: 0.875rem;
      flex: 1;
      width: 100%;

      font {
        float: left;
      }
    }
  }

  .allpl {
    margin-top: 0.625rem;
    margin-bottom: 3.125rem;
    background: #fff;
    padding: 0.625rem;

    .tilse {
      text-align: left;
      line-height: 2rem;
      border-bottom: #e8e8e8 solid 0.0625rem;
    }

    .pjhf {
      padding: 0.625rem 0;

      .pjtime {
        color: #919191;
        flex: 5;
        text-align: left;
      }

      span {
        padding: 0.0625rem 0.625rem;
        border: solid 0.0625rem #bfcbd9;
        border-radius: 0.8125rem;
      }
    }

    .othepj {
      background: #efedf5;
      padding-left: 1.875rem;
      padding-right: 0.625rem;
    }
  }
}
.item-pic {
  padding:0.75rem 0 0 0;
}
.pcStyle .comment-footer  {
  left:auto;
}
.pj-img {
  width: 4.375rem;
  height: 4.375rem;
  margin:0 0.5rem 0.5rem 0;
  border-radius: 0.25rem;
  object-fit: cover;
}

.pic {
  display: flex;
  .pic-flex {
    flex-wrap: wrap;
  }
}

//新样式
.comm-all {
  background-color: #fff;
  border-radius: 0.5rem;
  padding:0.75rem;
  margin:0.5rem 0.75rem 0 0.75rem;
  .comm-user {
    .avatar {
      width: 2.5rem;
      height: 2.5rem;
      border-radius: 50%;
      margin:0 0.25rem 0 0;
    }
    .user-wrap {
      flex:1;
      .title {
        text-align: left;
        h3 {
          font-size: 0.875rem;
          font-weight: bold;
          line-height: 1.25rem;
          color: #333333;
        }
        h4 {
          font-size: 0.75rem;
          font-weight: 400;
          line-height: 1.0625rem;
          color: #666666;
        }
      }
      .user-time {
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1.0625rem;
        color: #999999;
      }
    }
  }
  .comment {
    padding:0.75rem 0 0.5rem 0;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #333333;
    text-align: left;
  }
  .append-flex {
    // display: inline-block;
    text-align: left;
    padding:0.75rem 0rem 0.5rem 0rem;
  }
  .comment-box {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: #333333;
    text-align: left;
    display: inline;
    word-break:break-all;
    word-wrap:break-word;
  }
  .comment-append {
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    color: #E32323;
    text-align: left;
    display: inline;
  }
  .goods-rate {
    padding: 0.75rem 0;
    .rate {
      flex:1;
      h4 {
        font-size: 0.75rem;
        font-weight: 400;
        line-height: 1.0625rem;
        color: #999999;
      }
    }
    .option-right {
      flex:1;
      font-size: 0.75rem;
      font-weight: 400;
      line-height: 1.0625rem;
      color: #999999;
      .total {
        padding: 0 0 0 0.1875rem;
      }
    }
  }
  .goods-wrap {
    background-color: #F5F5F5;
    border-radius: 2px;
    .info-wrap {
      width:100%;
      box-sizing: border-box;
      padding: 0 0.75rem 0 0;
      h4 {
        width:70%;
        font-size: 0.8125rem;
        font-weight: 400;
        line-height: 1.1875rem;
        color: #666666;
        text-align: left;
      }
      h5 {
        font-size: 0.8125rem;
        font-weight: bold;
        line-height: 1.1875rem;
        color: #333333;
      }
    }
    .images {
      width: 2.1875rem;
      height: 2.1875rem;
      margin:0 0.5rem 0 0;
      border-radius: 0.125rem 0rem 0rem 0.125rem;
    }
  }
}
.comm-padding {
  padding: 0.75rem 0.75rem 0 0.75rem;
}
.comment-main {
  background-color: #fff;
  border-radius: 0.5rem;
  padding:0.75rem;
  margin:0.5rem 0.75rem 0 0.75rem;
  h3 {
    text-align: left;
    font-size: 0.875rem;
    font-weight: bold;
    line-height: 1.25rem;
    color: #333333;
    padding:0 0 0.75rem 0;
    border-bottom: 0.0625rem solid #E7E7E7;
    span {
      vertical-align: baseline;
    }
  }
  .comment-list {
    .comment-item {
      padding:0.75rem 0 0 0;
      .img {
        width: 1.375rem;
        border-radius: 50%;
        height: 1.375rem;
        margin:0 0.25rem 0 0;
        img {
          width: 1.375rem;
          height: 1.375rem;
          border-radius: 50%;
        }
      }
      .comment-wrap {
        flex:1;
        .wrap-left {
          
          .wrap-name {
            width:60%;
            font-size: 0.8125rem;
            font-weight: 400;
            line-height: 1.1875rem;
            
            // flex-wrap: wrap;
            .wrap-merchant {
              font-size: 0.625rem;
              font-weight: 400;
              line-height: 0.875rem;
              color: #FFFFFF;
              padding:0.125rem 0.25rem;
              border-radius: 0.125rem;
              background-color: #CCCCCC;
              margin:0 0 0 8px;
            }
            h4 {
              padding:0 0.0625rem 0 0;
              color: #666666;
              text-align: left;
            }
            .name-padding {
              padding:0.0625rem 0 0 0;
            }
            span {
              color:#F15353;
            }
          }
          h5 {
            font-size: 0.75rem;
            font-weight: 400;
            line-height: 1.1875rem;
            color: #666666;
            text-align: right;
          }
        }
        .comment-desc {
          font-size: 0.8125rem;
          font-weight: 400;
          line-height: 1.1875rem;
          color: #333333;
          text-align: left;
          padding: 0.625rem 0 0  0;
        }
      }
      
    }
  }
}
.comment-footer {
  width:23.4375rem;
  background-color: #fff;
  position: fixed;
  left:0;
  bottom:0;
  padding:0.3125rem 0.75rem;
  .share {
    padding:0 1.25rem 0 0;
    .icon-material_share {
      font-size: 1.25rem;
    }
    p{
      &:last-child {
        font-size: 0.625rem;
        font-weight: 400;
        line-height: 1.0625rem;
        color: #333333;
      }
    }
  }
  .comment-btn {
    flex:1;
    height: 100%;
    height: 2.5rem;
    position: relative;
    input {
      width: 100%;
      background: #F5F5F5;
      border:none;
      border-radius: 1.3125rem;
      padding:0 0 0 0.75rem;
    }
    div {
      line-height: 2.5rem;
      font-size: 0.9375rem;
      font-weight: 400;
      color: #FFFFFF;
      padding:0rem 1.25rem;
      border-radius: 1.3125rem;
      background-color: var(--themeBaseColor);
      position: absolute;
      right:0;
      top:0;
    }
  }
}
</style>
